<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./element.css">
    <!-- 引入组件库 -->
    <link rel="stylesheet" href="./common.css">

    <style>
        .title {
            font-size: 20px;
            font-weight: 600;
            font-family: fangsong;
            border-bottom: 1px solid #aaa;
        }

        .list {
            margin: 32px auto 0;

        }

        .li {
            background-color: #122840;
            padding: 20px;
            color: #aaa;
            font-size: 14px;
            margin-bottom: 16px;
            cursor: pointer;
        }

        .li:hover .info .name {
            color: #1487c0;
        }

        .info {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
        }


        .info .name {
            max-width: 80%;
            color: #fff;
            font-size: 18px;

        }

        .info .status {}

        .desc {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .desc .time {}

        .desc .state {}
    </style>
</head>
<script src="./vue.js"></script>
<script src="./axios.js"></script>
<script src="./element.js"></script>
<script src="./dayjs.min.js"></script>
<script src="./common.js"></script>

<body>
    <div id="app">
        <div class="head">
            <div class="logo">
                <img class="logo-img" src="./images/kefuzhiyuan.png" alt="">
            </div>
            <el-dropdown trigger="click">
                <span class="el-dropdown-link">
                    <img class="user-icon" src="./images/user.png" alt="">
                    用戶名稱<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item><span @click="onNav('faceback')">創建工單</span></el-dropdown-item>
                    <el-dropdown-item><span @click="onNav('contact')">服務記錄</span></el-dropdown-item>

                </el-dropdown-menu>
            </el-dropdown>
        </div>
        <div class="content">
            <img class="dabeijing" src="./images/dabeijing.png" alt="">

            <img src="./images/fuwujlu.png" alt="">
            <div class="title"></div>
            <div class="list">
                <div class="li" v-for="item in datasource" :key="item.id" @click="onView(item)">
                    <div class="info">
                        <div class="name text-overflow ">問題{{item.id}}:{{item.askcontent}}</div>
                        <div class="status">{{item.stateUserName}}</div>
                    </div>
                    <div class="desc">
                        <div class="time">{{formatTime(item.createtime)}}</div>
                        <div class="state'">{{item.stateAdminName}}</div>
                    </div>
                </div>
            </div>
            <el-pagination :page-size="pageSize" :current-page="pageNo" layout="pager,next" :total="total"
                next-text="下一頁"   @current-change="handlePageChange">
            </el-pagination>
            <div class="no-more">-已經到底啦~-</div>
        </div>

        <img src="./images/dibu.png" alt="" class="foot">
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                pageNo: 1,
                pageSize: 4,
                total: 0,
                datasource: [],
                query: {
                    user: ''
                }
            },
            mounted() {
                const query = getParams(window.location.search)
                console.log(query, window.location);
                this.query = query
                this.getData()
            },
            methods: {
                onView(item){
                    window.location.href = `./detail.html?id=${item.id}&user=${this.query.user}`
                },
                onNav(type) {
                    window.location.href = `./${type}.html?user=${this.query.user}`
                },
                
                 // 当页码改变时执行的逻辑
                handlePageChange(page) { 
                    this.pageNo = page;
                    this.getData()
                 
                },
                getData() {
                  
                    axios.get(`https://cs3.maoxiandao.xin/index/index/askList?page=${this.pageNo}&pageSize=${this.pageSize}&user_id=${this.query.user}`).then(res => {
                        if (res.data.code == 200) {
                            const result = res.data.data
                            console.log(result)
                            this.datasource = result.data
                            this.total = result.total
                        }
                    }).catch(err => {
                        console.log(err)
                    })
                },
                formatTime(time){
                    return formatTime(time)
                }
                
            },


        })
    </script>
</body>

</html>